<template>
  <div class="chat-input">
    <textarea
        v-model="message"
        placeholder="请输入您的问题..."
        @keydown.enter.exact.prevent="handleSend"
        rows="1"
        ref="textarea"
    ></textarea>
    <button
        class="send-btn"
        @click="handleSend"
        :disabled="!message.trim()"
    >
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
      </svg>
    </button>
  </div>
</template>

<script>
import {ref, watch} from 'vue'

export default {
  emits: ['send'],
  setup(props, {emit}) {
    const message = ref('')
    const textarea = ref(null)

    const handleSend = () => {
      if (message.value.trim()) {
        emit('send', message.value.trim())
        message.value = ''
      }
    }

    watch(message, () => {
      if (textarea.value) {
        textarea.value.style.height = 'auto'
        textarea.value.style.height = `${Math.min(textarea.value.scrollHeight, 150)}px`
      }
    })

    return {
      message,
      textarea,
      handleSend
    }
  }
}
</script>

<style>
.chat-input {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.75rem;
}

.chat-input textarea {
  flex: 1;
  border: none;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 1rem;
  max-height: 150px;
  overflow-y: auto;
}

.chat-input textarea::placeholder {
  color: #999;
}

.send-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: #666;
}

.send-btn:hover {
  color: #333;
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>